<template>
	<div style="background-color: #F4F4F4;">
		<Header />
		<!-- <div style="position: relative;display: flex;align-items: center;justify-content: center;">
			<img style="width: 100%; height: auto;" src="@/assets/images/cs4.png" />
			<div style="position: absolute;color: #fff;font-size: 30px;font-weight: 600;">应用产品</div>
		</div> -->
		<div class="bannerWrapper">
		    <div class="topTitle">
		        应用产品
		    </div>
		    <div class="mapNav">
		        <div class="indexContainer">
		            <el-breadcrumb separator-class="el-icon-arrow-right">
		                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		                <el-breadcrumb-item :to="{ path: '/ApplicationProducts' }">产品列表</el-breadcrumb-item>
								<!-- <el-breadcrumb-item>{{menuTitle}}</el-breadcrumb-item> -->
		            </el-breadcrumb>
		        </div>
		
		    </div>
		</div>
		<div class="indexContainer">
			<div class="content">
				<!-- <img style="width: 100%; height: auto;" src="@/assets/images/ApplicationProducts1.png"  /> -->
				
				<div class="screen">
					<!-- <div v-if="shows == 0"> -->
						<filters @change="filterChange"></filters>
					<!-- </div>
					<p v-if="shows == 0" @click="shows = 1">收起</p>
					<p v-if="shows == 1" @click="shows = 0">下拉</p> -->
				</div>
				<div class="cplist">
					<el-empty v-if="listData.length==0" :image-size="100"  description="暂无数据"></el-empty>
					<el-row :gutter="20">
						<el-col v-for="i in listData" :key="i.id" :span="6">
							<div class="hovers" style="background-color: #fff;margin-bottom: 14px;" >
								 <div><img style="width: 100%; height: 234px;cursor: pointer;" :src="i.thumbnail"  @click="gotoDetail(i.id)" /></div>
								 <div style="display: flex;align-items: center;padding: 10px 5px;">
									 <img style="width: 5px; height: 16px;" src="@/assets/images/ApplicationProducts3.png"  />
									 <p @click="gotoDetail(i.id)" style="font-weight: bold;margin-left: 6px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;">{{i.title}}</p>
								 </div>
								 <div style="display: flex;align-items: center;padding: 2px 15px;font-size: 14px;">
									 <img style="width: 16px; height: 16px;margin-top: 2px;" src="@/assets/images/ApplicationProducts5.png"  />
									 <p style="color:#83827E">上架时间：{{i.shelfTime}}</p>
								 </div>
								 <div style="display: flex;align-items: center;padding: 2px 15px;font-size: 14px;">
									 <img style="width: 16px; height: 16px;margin-top: 2px;" src="@/assets/images/ApplicationProducts6.png"  />
									 <p v-if="i.updateFrequency == 5" style="color:#83827E">更新频率：每年</p>
									 <p v-if="i.updateFrequency == 4" style="color:#83827E">更新频率：每月</p>
									 <p v-if="i.updateFrequency == 3" style="color:#83827E">更新频率：每周</p>
									 <p v-if="i.updateFrequency == 2" style="color:#83827E">更新频率：每天</p>
									 <p v-if="i.updateFrequency == 1" style="color:#83827E">更新频率：实时</p>
								 </div>
								 <div style="margin: 8px 15px;height:60px;font-size: 14px;color:#83827E;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
									 {{i.description}}
								 </div>
								 <div style="display: flex;padding: 8px 16px;">
									 <div v-if="i.source == 1" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;margin-right: 20px;">内部产品</div>
									 <div v-if="i.source == 2" style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;margin-right: 20px;">外部产品</div>
									 <div style="border: 1px solid #DFE4E8;border-radius: 20px;padding: 5px 20px;background-color: #F5F6FA;color: #737F7F;font-size: 14px;">{{i.categoryName}}</div>
								 </div>
								 <div style="border-top: 1px solid #ECECEC;text-align: center;padding: 20px 0;margin-top: 6px;color: #99A5A4;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
									 供应商：{{i.supplier}}
								 </div>
							</div>
						</el-col>
					</el-row>
					 
				</div>
				<div style="margin: 0 auto;padding: 30px 0;">
					<el-pagination v-if="listData.length!=0" background
						layout="prev, pager, next,sizes,jumper" @size-change="handleSizeChange" :total="total" :page-sizes="[12, 24, 36, 48]" :page-size="pageTotal"
						:pager-count="5" :current-page.sync="page" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</div>
		</div> 

		<Footer />
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import filters from "./filter.vue";
	import {
		ApplicationProductsList
	} from "@/request/api/ApplicationProducts";
	export default {
		components: {
			Header,
			Footer,
			filters,
		},
		data() {
			return {
				// shows:0,
				menuIndex: 0,
				loading: false,
				page: 1,
				total: 0,
				listData: [],
				sjTime:[],
				pageTotal:12,
				userId:'',
				filters:{},
				userInfo:{}
			};
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo.id',this.userInfo.id)
			}
			this.userId = this.userInfo.id
			// console.log('this.userid',this.userId)
			this.getList()
		},
		mounted() {
			// console.log("mounted");
		},
		methods: {
			handleSizeChange(val) {
				this.pageTotal = val
				// console.log(`每页 ${val} 条`);
				this.getList()
			},
			// 筛选回调
			filterChange(e) {
				this.filters = e
				// console.log('filterChange---eeee', e)
				// console.log('filterChange---eeeeeexxxsssssx', e.categoryId)
				this.page = 1
				this.getList()
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 点击菜单
			handleMenu(index) {
				this.menuIndex = index
				this.page = 1
				this.getList()
			},
			// 获取列表
			getList() {
				this.listData = []
				this.loading = true
				let params = {
					type: 1,
					current: this.page,
					pageSize: this.pageTotal,
					categoryId:this.filters.categoryId,
					source:this.filters.source,
					isFree:this.filters.isFree,
					serviceMode:this.filters.serviceMode,
					title:this.filters.title,
					generalName:this.filters.generalName,
					sort:this.filters.ordered,
				}
				ApplicationProductsList(params).then((res) => {
					// console.log('res.data',res.data)
					// console.log('res.shelfTime',res.data.data.totalList[0].shelfTime)
					this.loading = false
					if (res.data.code == 1) {
						this.listData = res.data.data.totalList
						this.listData.forEach((res)=>{
							
							let date = new Date(res.shelfTime);
							let year = date.getFullYear();
							let month = ("0" + (date.getMonth() + 1)).slice(-2);
							let day = ("0" + date.getDate()).slice(-2);
							let hours = ("0" + date.getHours()).slice(-2);
							let minutes = ("0" + date.getMinutes()).slice(-2);
							let seconds = ("0" + date.getSeconds()).slice(-2);
							let times =  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
							// console.log('times-----',times)
							res.shelfTime = times
							// console.log('res.shelfTime-----',res.shelfTime)
						})
						// console.log('this.listData',this.listData)
						this.total = res.data.data.total
						
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			todetail(id) {
				this.$router.push({
					name: "industryNewDetail",
					query: {
						id,
						menuIndex: this.menuIndex
					},
				});
			},
			gotoDetail(id) {
				this.$router.push({
					name:"ApplicationProductsDetail",
					query:{
						id,
						userId:this.userId
					}
				});
				// console.log('id-----------------------',id)
			},
			gotoIndex(){
				this.$router.push({
					name:"index",
					
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
	.content{
		// background-color: #F7F7F7;
		// background-color: #C678DD;
	}
	.indexContainer{
		background-color: #F7F7F7;
	}
	.screen,.cplist{
		margin: 0 auto;
		margin-top: 10px;
	}
	.cplist:after{
		content: '';
		width: 48.4%;
	}
	.hovers:hover{
		box-shadow: 0px 0px 8px 8px rgb(0 44 102 / 5%);
	}
	.bannerWrapper{
	    position: relative;
	}
	.mapNav{
	   margin:20px 0;
	}
	.topTitle{
	    color:#fff;
	    height:100px;
	    font-size:30px;
	    line-height: 100px;
	    font-weight:800;
	    text-align: center;
	    background: url('~@/assets/images/cs4.png');
	}
</style>